﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="suggestionbox.aspx.cs" Inherits="suggestionbox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
            .suggestion2
            {
                background: lightblue;
                color: #000000;
                border: 1px solid darkorange;
            }
            
            .focus2
            {
                background: orange;
                color: #ffffff;
            }
    </style>
    <script type="text/javascript" src="/scripts/NinJa.js"></script>
    <script type="text/javascript" src="/scripts/NinJaVisuals.js"></script>
    <script type="text/javascript" src="/scripts/NinJaControls.js"></script>
    <script type="text/javascript">
        var colors = [];
        for (var c in Colors) {
            colors.Add(c);
        }

        function getColors(e) {
            e = e.toLowerCase();
            return colors.FindAll(function (f) {
                return f.toLowerCase().Contains(e) || Colors[f].toLowerCase().Contains(e);
            });
        }

        Page.OnLoad.Add(function () {
            var s = new SuggestionBox();
            s.Source(function (e) {
                return fruits.FindAll(function (f) {
                    return f.Name.toLowerCase().Contains(e);
                });
            });

            s.BindText("Name").DisplayClass("suggestion2").FocusClass("focus2").MinLength(0);

            Page.AddElement(s);

            $SuggestionBox("Sgb1").OnSuggestionSelected.Add(function (e) {
                Page.BackgroundColor(e.Data);
            });
        });

        function Fruit(name, id) {
            this.Name = name;
            this.Id = id;
        }

        var fruits = [new Fruit("orange", 0),
                 new Fruit("cherry", 1),
                 new Fruit("lime", 2),
                 new Fruit("lemon", 3),
                 new Fruit("apple", 4),
                 new Fruit("pineapple", 5),
                 new Fruit("banana", 6),
                 new Fruit("berry", 7),
                 new Fruit("kiwi", 8),
                 new Fruit("strawberry", 9),
                 new Fruit("passion fruit", 10),
                 new Fruit("dragon fruit", 11)];
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="Sgb1" bindvalue="@Colors" class="suggestion" source="getColors" />
    </form>
</body>
</html>
